<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>我是专家</title>
		<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5, maximum-scale=1.0, user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				height: 100%;
				overflow: hidden;
			}
			
			.mui-search:before {
				font-family: Muiicons;
				font-size: 24px;
				font-weight: 400;
				position: absolute;
				top: 50%;
				right: 50%;
				display: none;
				margin-top: -18px;
				margin-right: 35px;
				content: url(img/expert-index/sousuo_03.png)
			}
		</style>
	</head>

	<body>

		<nav id="nav_dbdh" class="mui-bar mui-bar-tab" style="background: url(img/index/bottom-box_02.png); height: 98px;">
			<a id="nv-recent-contacts" class="mui-tab-item mui-active" href="#ep-zjlxr">
				<span id="sp-ep-rcs" class="mui-icon" style="background: url(img/expert-index/zuijinlianxiren-lanse_03.png) no-repeat; height: 46px; width: 46px;"></span>
				<span class="mui-tab-label" style="font-size: 22px; padding-top: 5px; margin-left: -14px;">最近联系人</span>
			</a>

			<!--<a id="nv-ep-contacts" class="mui-tab-item" href="#ep-txl">
				<span id="sp-ep-cs" class="mui-icon" style="background: url(img/expert-index/tongxunlu-hui_05.png) no-repeat; height: 46px; width: 46px;"></span>
				<span class="mui-tab-label" style="font-size: 22px; padding-top: 5px; margin-left: -10px;">通讯录</span>
			</a>-->

			<a id="nv-ep-my" class="mui-tab-item" href="#ep-wd">
				&nbsp;&nbsp;<span id="sp-ep-me" class="mui-icon" style="background: url(img/expert-index/wode-hui_08.png) no-repeat; height: 46px; width: 46px;"></span>
				<span class="mui-tab-label" style="font-size: 22px; padding-top: 5px; margin-left: -12px;">我的</span>
			</a>
		</nav>

		<script>
			/**
			 * 监听底部导航事件，用于更改其背景图标
			 */
			document.getElementById("nv-recent-contacts").addEventListener("tap", function() {
				document.title = "最近联系人";
				document.getElementById("sp-ep-rcs").style.background = "url(img/expert-index/zuijinlianxiren-lanse_03.png) no-repeat";
				//document.getElementById("sp-ep-cs").style.background = "url(img/expert-index/tongxunlu-hui_05.png) no-repeat";
				document.getElementById("sp-ep-me").style.background = "url(img/expert-index/wode-hui_08.png) no-repeat";
			});

			/*document.getElementById("nv-ep-contacts").addEventListener("tap", function() {
				document.title = "通讯录";
				document.getElementById("sp-ep-rcs").style.background = "url(img/expert-index/zuijinlianxiren-huise_03.png) no-repeat";
				document.getElementById("sp-ep-cs").style.background = "url(img/expert-index/tongxunlu-lanse_05.png) no-repeat";
				document.getElementById("sp-ep-me").style.background = "url(img/expert-index/wode-hui_08.png) no-repeat";
			});*/

			document.getElementById("nv-ep-my").addEventListener("tap", function() {
				document.title = "我的";
				document.getElementById("sp-ep-rcs").style.background = "url(img/expert-index/zuijinlianxiren-huise_03.png) no-repeat";
				//document.getElementById("sp-ep-cs").style.background = "url(img/expert-index/tongxunlu-hui_05.png) no-repeat";
				document.getElementById("sp-ep-me").style.background = "url(img/expert-index/wode-lan_08.png) no-repeat";
			});
		</script>

		<div class="mui-content">
			<!--
            	作者：xuzhao_deng@sina.com
            	时间：2016-12-01
            	描述：首页内容
            -->
			<div id="ep-zjlxr" class="mui-control-content mui-active" style="width: 100%; font-size: 24px;">
				<br />
				<!--
                	作者：xuzhao_deng@sina.com
                	时间：2016-12-15
                	描述：mui-input-row  mui-search
                -->
				<div id="dv-serach" class="" style="width: 100%; height: 70px; background: url(img/expert-index/sousuokuang_03.png);">
					<input type="search" placeholder="Search" style="height: 70px; background-color: white; font-size: 24px;" />
				</div>
				<br />

				<div>
					<div id="dv_home_content_bor" style="width: 100%;">
						<!--
                        	作者：xuzhao_deng@sina.com
                        	时间：2016-12-09
                        	描述：家长问题列表
                        -->
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
									<li class="mui-table-view-cell">
										<a href="html/expert/troubleshooting.html" style="display: flex;">
											<img src="img/jzkt/cbd.jpg" style="height: 90px; width: 90px;">
											<div class="mui-table" style="margin-left: 20px;">
												<div class="mui-table-cell mui-col-xs-10">
													<h4 class="mui-ellipsis" style="font-size: 24px;">苏小妹</h4><br />
													<p class="mui-h6 mui-ellipsis" style="font-size: 22px;">孩子老不爱吃饭，该不该打？</p>
												</div>
												<div class="mui-table-cell mui-col-xs-2">
													<span style="margin-left: -60px; font-size: 24px;" class="mui-h5">12:25</span>
												</div>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a href="html/expert/troubleshooting.html" style="display: flex;">
											<img src="img/jzkt/cbd.jpg" style="height: 90px; width: 90px;">
											<div class="mui-table" style="margin-left: 20px;">
												<div class="mui-table-cell mui-col-xs-10">
													<h4 class="mui-ellipsis" style="font-size: 24px;">苏小妹</h4><br />
													<p class="mui-h6 mui-ellipsis" style="font-size: 22px;">孩子老不爱吃饭，该不该打？</p>
												</div>
												<div class="mui-table-cell mui-col-xs-2">
													<span style="margin-left: -60px; font-size: 24px;" class="mui-h5">12:25</span>
												</div>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a href="html/expert/troubleshooting.html" style="display: flex;">
											<img src="img/jzkt/cbd.jpg" style="height: 90px; width: 90px;">
											<div class="mui-table" style="margin-left: 20px;">
												<div class="mui-table-cell mui-col-xs-10">
													<h4 class="mui-ellipsis" style="font-size: 24px;">苏小妹</h4><br />
													<p class="mui-h6 mui-ellipsis" style="font-size: 22px;">孩子老不爱吃饭，该不该打？</p>
												</div>
												<div class="mui-table-cell mui-col-xs-2">
													<span style="margin-left: -60px; font-size: 24px;" class="mui-h5">12:25</span>
												</div>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell" style="display: flex;">
										<a href="html/expert/troubleshooting.html" style="display: flex;">
											<img src="img/jzkt/cbd.jpg" style="height: 90px; width: 90px;">
											<div class="mui-table" style="margin-left: 20px;">
												<div class="mui-table-cell mui-col-xs-10">
													<h4 class="mui-ellipsis" style="font-size: 24px;">苏小妹</h4><br />
													<p class="mui-h6 mui-ellipsis" style="font-size: 22px;">孩子老不爱吃饭，该不该打？</p>
												</div>
												<div class="mui-table-cell mui-col-xs-2">
													<span style="margin-left: -60px; font-size: 24px;" class="mui-h5">12:25</span>
												</div>
											</div>
										</a>
									</li>
									<li class="mui-table-view-cell">
										<a href="html/expert/troubleshooting.html" style="display: flex;">
											<img src="img/jzkt/cbd.jpg" style="height: 90px; width: 90px;">
											<div class="mui-table" style="margin-left: 20px;">
												<div class="mui-table-cell mui-col-xs-10">
													<h4 class="mui-ellipsis" style="font-size: 24px;">苏小妹</h4><br />
													<p class="mui-h6 mui-ellipsis" style="font-size: 22px;">孩子老不爱吃饭，该不该打？</p>
												</div>
												<div class="mui-table-cell mui-col-xs-2">
													<span style="margin-left: -60px; font-size: 24px;" class="mui-h5">12:25</span>
												</div>
											</div>
										</a>
									</li>
								</ul>
							</div>
						</div>

					</div>

				</div>
			</div>
			<!--
            	作者：xuzhao_deng@sina.com
            	时间：2016-12-01
            	描述：通讯录
            -->
			<div id="ep-txl" class="mui-control-content">

			</div>

			<!--
            	作者：xuzhao_deng@sina.com
            	时间：2016-12-14
            	描述：专家个人中心
            -->
			<div id="ep-wd" class="mui-control-content" style="font-size: 19px;">
				<div id="dv-zj-bg">
					<img src="img/expert-index/bg.png" style="width: 100%; height: 300px;" />
				</div>
				<div style="margin: -70px 0px 0px 30px;">
					<img src="img/expert-index/touxiang_04.png" style="margin: 0px 0px 0px, 0px; width: 150px; height: 150px;" />
					<img src="img/expert-index/myicon.png" style="width: 150px; height: 150px; margin: 0px 0px 0px -150px;" />
					<div style="margin: -115px 0px 0px 170px; font-family: '微软雅黑';">
						<span id="iptExpUserName" style="color: white; font-size: 36px"></span><br /><br /><br />
						<span style="font-size: 30px">标签</span>
					</div>
				</div><br /><br /><br />
				<div id="dv-ep-my-data" style="margin: 0px 0px 0px 30px;">
					<span>
						<p style="font-size: 24px;">资质证书：国家二级心理咨询师</p>
					</span>
					<hr />
					<span>
						<p style="font-size: 24px;">咨询案例：981人次</p>
					</span>
					<hr />
					<span><p style="font-size: 24px;">咨询时长：9876小时</p></span>
					<hr />
					<span><p style="font-size: 24px;">擅长方向：性格习惯、情绪、人际关系、青春期、亲子关系</p></span>
					<hr />
					<span>
						<p style="font-size: 24px; line-height: 130%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">
						个人简介：清华大学心理研究生、国家注册二级心理咨询师、心理评测师、资深积极心理教育和心理咨询专家。。。</a></span>
				</div><br />
				<div id="dv-ep-rec-lst" style="margin: 0px 0px 0px 30px;">
					<span>相关推荐:</span><br /><br />
					<div>
						<ul class="mui-table-view mui-table-view-chevron" id="dv-nologin-home-content">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题2</span><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:赵敏 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题3</span><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:小龙女 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题4</span><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:黄蓉 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题5</span><br /><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:幕姑娘 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
							<li class="mui-table-view-cell mui-media">
								<a class="mui-navigate-right" style="display: flex;">
									<img src="img/jzkt/cbd.jpg" style="height: 110px; width: 110px;">
									<div class="mui-media-body"><br />
										<span style="font-size: 26px;">&nbsp;&nbsp;好文标题5</span><br /><br /><br />
										<p style="font-size: 22px;" class='mui-ellipsis'>&nbsp;&nbsp;推荐人:幕姑娘 &nbsp;&nbsp;&nbsp;&nbsp;发布时间：2016.12.08</p>
									</div>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script>
		mui.init();
		//窗体加载
		var $loginUser;
		window.onload = function() {
			$loginUser = JSON.parse(localStorage.getItem("login-user-expert"));
			console.log($loginUser);
			if($loginUser.nickName != null && $loginUser.nickName != "") {
				document.getElementById("iptExpUserName").innerHTML = $loginUser.nickName;
			} else {
				document.getElementById("iptExpUserName").innerHTML = $loginUser.nickName;
			}
		}
		
		function fun_getRecentContactsLstTem($rec, $i){
			var $recConTemHtml = 
				'<li class="mui-table-view-cell" style="display: flex;">'
			+		'<a href="html/expert/troubleshooting.html" style="display: flex;">'
			+			'<img src="img/jzkt/cbd.jpg" style="height: 90px; width: 90px;">'
			+			'<div class="mui-table" style="margin-left: 20px;">'
			+				'<div class="mui-table-cell mui-col-xs-10">'
			+					'<h4 class="mui-ellipsis" style="font-size: 24px;">苏小妹</h4><br />'
			+					'<p class="mui-h6 mui-ellipsis" style="font-size: 22px;">孩子老不爱吃饭，该不该打？</p>'
			+				'</div>'
			+				'<div class="mui-table-cell mui-col-xs-2">'
			+					'<span style="margin-left: -60px; font-size: 24px;" class="mui-h5">12:25</span>'
			+				'</div>'
			+			'</div>'
			+		'</a>'
			+	'</li>'
		}
	</script>

</html>